<script setup lang="ts">
import { ref, watch } from "vue";
import DemoSlotChild from "./components/DemoSlotChild.vue";

const items = ref([
  { title: "Feed a cat", id: "aaa" },
  { title: "Buy milk", id: "bbb" },
]);
const anotherAttribute = ref("外面传入参数123");
</script>

<template>
  <h1>template 和 slot</h1>
  <p>
    items 在当前作用域声明，并传入到 demo-slot-child 控件内，slotProps 表示
    demo-slot-child 控件插槽 slot
    的属性，名字可以随意起名，名字只在当前作用域有效
  </p>
  <demo-slot-child :items="items" :anotherAttribute="anotherAttribute">
    <template v-slot:default="slotProps">
      <el-checkbox size="large">
        <span
          class="green"
          :id="slotProps.item.id"
          :title="slotProps.anotherAttribute"
          >{{ slotProps.item.title }}</span
        >
      </el-checkbox>
    </template>
  </demo-slot-child>

  具名插槽的缩写 #default
  <demo-slot-child :items="items" :anotherAttribute="anotherAttribute">
    <template #default="slotProps">
      <el-checkbox size="large">
        <span
          class="green"
          :id="slotProps.item.id"
          :title="slotProps.anotherAttribute"
          >{{ slotProps.item.title }}</span
        >
      </el-checkbox>
    </template>
  </demo-slot-child>
</template>
